<template>
  <div class="box">
    <div class="header">
      <div class="h-left">
        <ul>
          <li @click="talkClick">私聊<span ref="talk"></span></li>
          <li @click="actClick">互动<span ref="act"></span></li>
          <li @click="msgClick">通知<span ref="msg"></span></li>
        </ul>
      </div>
      <div class="h-right">
        <span class="erji"
          >🎧
          <p class="kf">客服小壹</p></span
        >

        <span class="dian"
          >···
          <p class="gd">更多</p></span
        >
      </div>
    </div>
    <main>
      <div class="sce-nav">
        <span ref="all" @click="allClick" style="color: #4aa1eb">全部</span>
        <span ref="ing" @click="ingClick">服务中</span>
        <span ref="ed" @click="edClick">服务过</span>
      </div>
      <div class="main-middle">
        <ul>
          <li @click="totalk">
            <div class="left-box">
              <img src="../../assets/img/message/nv2.png" alt="" />
            </div>
            <div class="right-box">
              <p class="p1">
                咨询顾问大宇
                <span>06-16</span>
              </p>
              <p class="p2">可以说说自己的情况和诉求的哦</p>
            </div>
          </li>
          <li @click="totalk">
            <div class="left-box">
              <img src="../../assets/img/message/nv.png" alt="" />
            </div>
            <div class="right-box">
              <p class="p1">
                咨询顾问燕燕
                <span>06-15</span>
              </p>
              <p class="p2">可以说说自己的情况和诉求的哦</p>
            </div>
          </li>
          <li @click="totalk">
            <div class="left-box">
              <img src="../../assets/img/message/nv.png" alt="" />
            </div>
            <div class="right-box">
              <p class="p1">
                王静
                <em>EFT(情绪取向)婚姻家庭治疗师</em>
                <span>06-11</span>
              </p>
              <p class="p2">你好，我是王老师，有什么需要帮助的吗？</p>
            </div>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const talk = ref(null);
    const act = ref(null);
    const msg = ref(null);
    const all = ref(null);
    const ing = ref(null);
    const ed = ref(null);

    const talkClick = () => {
      talk.value.style = "background: rgba(0, 160, 255)";
      act.value.style = "background: white";
      msg.value.style = "background: white";
    };
    const actClick = () => {
      talk.value.style = "background: white";
      act.value.style = "background: rgb(0, 160, 255)";
      msg.value.style = "background: white";
    };
    const msgClick = () => {
      talk.value.style = "background: white";
      act.value.style = "background: white";
      msg.value.style = "background: rgb(0, 160, 255)";
    };

    const allClick = () => {
      all.value.style = "border: 1px solid rgba(0, 160, 255)";
      ing.value.style = "border: none";
      ed.value.style = "border: none";
    };
    const ingClick = () => {
      all.value.style = "border: none";
      ing.value.style = "border: 1px solid rgba(0, 160, 255)";
      ed.value.style = "border: none";
    };
    const edClick = () => {
      all.value.style = "border: none";
      ing.value.style = "border: none";
      ed.value.style = "border: 1px solid rgba(0, 160, 255)";
    };
    const totalk = () => {
      router.push("/talk");
    };

    return {
      talk,
      act,
      msg,
      all,
      ing,
      ed,
      talkClick,
      actClick,
      msgClick,
      allClick,
      ingClick,
      edClick,
      totalk,
    };
  },
};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  padding: 20px 0 20px 12px;
  .h-left {
    ul {
      display: flex;
      width: 200px;
      margin-right: 20px;
      li {
        width: 60px;
        font-size: 16px;
        font-weight: 600;
        position: relative;
        color: #040404;
        span {
          display: block;
          width: 23px;
          height: 4.5px;
          position: absolute;
          border-radius: 3px;
          background: rgba(0, 160, 255);
          bottom: -12px;
          left: 5px;
          // font-size: ;
        }
      }
      li:nth-of-type(2) span,
      li:nth-of-type(3) span {
        background: white;
      }
    }
  }
  .h-right {
    display: flex;
    span {
      width: 70px;
      height: 10px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      .kf {
        width: 100%;
        height: 9px;
        position: absolute;
        font-size: 7px;
        left: 0px;
        top: 21px;
        color: #ccc;
      }
      .gd {
        width: 100%;
        height: 9px;
        position: absolute;
        font-size: 7px;
        left: 0px;
        top: 21px;
        color: #ccc;
      }
    }
  }
}
main {
  margin: 8px 15px 0 0px;
  .sce-nav {
    span {
      width: 48px;
      height: 24px;
      display: inline-block;
      margin-bottom: 24px;
      margin-left: 13px;
      font-size: 8px;
      // font-weight: 600;
      color: #707070;
      text-align: center;
      line-height: 24px;
      background: #ecebeb;
      border-radius: 10px;
      // border: 1px solid rgba(0, 160, 255);
    }
    span:nth-child(1) {
      border: 1px solid rgba(0, 160, 255);
    }
  }
  .main-middle {
    ul {
      li {
        display: flex;
        img {
          width: 45px;
          height: 45px;
          margin: 11px;
        }
        .right-box {
          // margin-left: 12px;
          margin-right: 20px;
          border-bottom: 1px solid #efefef;
          p {
            margin: 0px 0 12px 0;
          }
          .p1 {
            padding-top: 9px;
            font-size: 16px;
            em {
              width: 240px;
              color: #707070;
              font-size: 8px;
              margin-bottom: 18px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }

            span {
              display: inline-block;
              font-size: 12px;
              color: #8c8c8c;
              float: right;
            }
          }
          .p2 {
            width: 280px;
            color: #8c8c8c;
            font-size: 14px;
            margin-bottom: 18px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }
}
.box {
  background: #fff;
  height: 100%;
}
</style>
